<template>
  <view class="content">
    <image class="logo" src="/static/logo.png"></image>

    <uv-form style="width: 100%;" ref="formRef" labelPosition="left" :model="userForm" :rules="rules"
             labelWidth="auto">
      <view class="login-form">
        <view class="login-form__input">
          <uv-form-item prop="username">
            <uv-input v-model="userForm.username" placeholder="用户名" type="text" shape="circle" border="none"
                      :maxlength="10" :customStyle="{padding: '8px 18px', backgroundColor: '#ffffff'}"></uv-input>
          </uv-form-item>
        </view>
        <view class="login-form__input">
          <uv-form-item prop="password">
            <uv-input v-model="userForm.password" placeholder="密码" type="password" shape="circle"
                      border="none" :maxlength="14"
                      :customStyle="{padding: '8px 18px', backgroundColor: '#ffffff'}"></uv-input>
          </uv-form-item>
        </view>
        <view class="login-form__input">
          <uv-form-item prop="confirmPassword">
            <uv-input v-model="userForm.confirmPassword" placeholder="确认密码" type="password" shape="circle"
                      :maxlength="14" border="none"
                      :customStyle="{padding: '8px 18px', backgroundColor: '#ffffff'}"></uv-input>
          </uv-form-item>
        </view>
        <view class="login-submit">
          <uv-button type="primary" text="立即注册" :customStyle="{padding: '8px 18px', borderRadius: '25px'}"
                     @click="submit()"></uv-button>
        </view>
      </view>
    </uv-form>

  </view>

  <uv-toast ref="toast"></uv-toast>
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue';
import {register, RegisterData} from '@/api/login';
import {pages} from '@/utils/page-url';

let userForm = reactive({
  username: '',
  phone: '',
  nickName: '',
  password: '',
  confirmPassword: ''
});

const formRef = ref();
const toast = ref();

const rules = {
  username: [
    {
      type: 'string',
      required: true,
      message: '用户名不能为空',
      trigger: ['blur', 'change']
    },
  ],
  password: [
    {
      type: 'string',
      required: true,
      message: '密码不能为空',
      trigger: ['blur', 'change']
    }, {
      pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[\w!@#$%^&*()-+=]{6,}$/,
      // 正则检验前先将值转为字符串
      transform(value: any) {
        return String(value);
      },
      trigger: ['blur', 'change'],
      message: '密码至少6位字符，支持数字、字母和除空格外的特殊字符，且必须同时包含数字和大小写字母'
    }
  ],
  confirmPassword: [
    {
      type: 'string',
      required: true,
      message: '确认密码不能为空',
      trigger: ['blur', 'change']
    }, {
      pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[\w!@#$%^&*()-+=]{6,}$/,
      // 正则检验前先将值转为字符串
      transform(value: any) {
        return String(value);
      },
      message: '密码至少6位字符，支持数字、字母和除空格外的特殊字符，且必须同时包含数字和大小写字母',
      trigger: ['blur', 'change']
    }, {
      // 自定义验证函数，见上说明，注意这里面的逻辑不能出现语法报错，否则可能导致不验证
      validator: (rule: any, value: any, callback: any) => {
        // 此处业务逻辑省略
        // 返回true表校验通过，返回false表示不通过
        return userForm.password === userForm.confirmPassword;
      },
      message: '两次密码输入不一致',
      trigger: ['blur']
    }
  ]
}

const submit = async () => {
  formRef.value.validate().then(async (res: any) => {
    const params: RegisterData = JSON.parse(JSON.stringify(userForm));
    const {code, msg} = await register(params);
    toast.value.show({
      type: 'loading',
      message: "正在加载",
      duration: 500,
      complete() {
        if (code === 200) {
          // @ts-ignore
          uni.$uv.route({
            type: 'redirect',
            url: pages.login
          })
          userForm = reactive({
            username: '',
            password: '',
            nickName: '',
            phone: '',
            confirmPassword: ''
          });
        } else {
          toast.value.show({
            type: 'error',
            message: msg,
            duration: 1500,
            position: 'top'
          })
        }
      }
    })
  }).catch((err: any) => {
    console.log('表单验证失败', err);
  })

}
</script>

<style lang="scss">
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 150rpx;
  width: 150rpx;
  margin-top: 50rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.login-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;

  &__input {
    width: 70%;
    filter: drop-shadow(1px 2px 8px #e3e3e3);
  }
}

.login-submit {
  width: 70%;
  margin-top: 50rpx;
  filter: drop-shadow(1px 2px 8px #e3e3e3);
}
</style>

<style lang="scss" scoped>
</style>
